<template>
  <div>
    <el-row class="root-lay">
      <el-col class="item-col" :span="3">
        <el-select size="small" v-model="selectedFont" placeholder="请选择字体" @change="onParamsChange">
          <el-option
            v-for="item in fontList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>

      <el-col class="item-col" :span="3">
        <el-select
          size="small"
          v-model="selectedFontSize"
          placeholder="请选择字号"
          @change="onParamsChange"
        >
          <el-option
            v-for="count in 70"
            :key="count + 7"
            :label="count + 7"
            :value="count + 7"
          >{{count + 7}}</el-option>
        </el-select>
      </el-col>

      <el-col class="item-col" :span="1">
        <el-image
          @click="onBoldClick"
          :class="selectedBold ?  'item-img-selected': 'item-img' "
          :src="boldImg"
          fit="cover"
        ></el-image>
      </el-col>

      <el-col class="item-col" :span="1">
        <el-image
          @click="onItalicsClick"
          :class="selectedItalics ?  'item-img-selected': 'item-img' "
          :src="italicsImg"
          fit="cover"
        ></el-image>
      </el-col>

      <el-col class="item-col" :span="1">
        <el-image
          @click="onUnderlineClick"
          :class="selectedUnderline ?  'item-img-selected': 'item-img' "
          :src="underlineImg"
          fit="cover"
        ></el-image>
      </el-col>

      <el-col class="item-col" :span="3">
        <el-select
          size="small"
          v-model="selectedLineType"
          placeholder="请选择线型"
          @change="onParamsChange"
        >
          <el-option
            v-for="item in lineTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>

      <el-col class="item-col" :span="3">
        <el-select
          size="small"
          v-model="selectedLineWidth"
          placeholder="请选择线宽"
          @change="onParamsChange"
        >
          <el-option v-for="count in 10" :key="count" :label="count" :value="count">{{count}}</el-option>
        </el-select>
      </el-col>

      <el-col class="item-col" :span="3" align="center">
        <p>线条颜色</p>
        <el-color-picker v-model="selectedLineColor" size="small" @change="onParamsChange"></el-color-picker>
      </el-col>

      <el-col class="item-col" :span="3" align="middle">
        <p>填充颜色</p>
        <el-color-picker v-model="selectedFillColor" size="small" @change="onParamsChange"></el-color-picker>
      </el-col>

      <el-col class="item-col" :span="3">
        <el-select
          size="small"
          v-model="selectedFillType"
          placeholder="请选择填充类型"
          @change="onParamsChange"
        >
          <el-option
            v-for="item in fillTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      selectedFont: "",
      selectedFontSize: "",
      selectedLineType: "",
      selectedLineWidth: "",
      selectedFillType: "",

      selectedLineColor: "",
      selectedFillColor: "",

      selectedBold: false,
      selectedItalics: false,
      selectedUnderline: false,

      boldImg: require("@/assets/img/shapes/bold.png"),
      italicsImg: require("@/assets/img/shapes/Italics.png"),
      underlineImg: require("@/assets/img/shapes/underline.png"),

      fontList: [
        {
          value: "SimSun",
          label: "宋体"
        },
        {
          value: "Microsoft YaHei",
          label: "微软雅黑"
        },
        {
          value: "STXihei",
          label: "华文细黑"
        },
        {
          value: "Verdana",
          label: "无衬线字体"
        }
      ],

      lineTypeList: [
        {
          value: 0,
          label: "实线"
        },
        {
          value: 1,
          label: "虚线"
        },
        {
          value: 2,
          label: "细虚线"
        },
        {
          value: 3,
          label: "划线-1点"
        },
        {
          value: 4,
          label: "划线-2点"
        }
      ],
      fillTypeList: [
        {
          value: 0,
          label: "无填充"
        },
        {
          value: 1,
          label: "不透明"
        },
        {
          value: 2,
          label: "透明"
        }
      ]
    };
  },

  props: {
    selectedShapeParam: {}
  },

  watch: {
    selectedShapeParam(val) {
      console.log("selectedShapeParam  change");
      this.selectedFont = val.selectedFont;
      this.selectedFontSize = val.selectedFontSize;

      this.selectedBold = val.selectedBold;
      this.selectedItalics = val.selectedItalics;
      this.selectedUnderline = val.selectedUnderline;

      this.selectedLineType = val.selectedLineType;
      this.selectedLineWidth = val.selectedLineWidth;

      this.selectedLineColor = val.selectedLineColor;
      this.selectedFillColor = val.selectedFillColor;

      this.selectedFillType = val.selectedFillType;
    }
  },
  methods: {
    onBoldClick(e) {
      this.selectedBold = !this.selectedBold;
      this.onParamsChange();
    },

    onItalicsClick(e) {
      this.selectedItalics = !this.selectedItalics;
      this.onParamsChange();
    },

    onUnderlineClick(e) {
      this.selectedUnderline = !this.selectedUnderline;
      this.onParamsChange();
    },

    onParamsChange() {
      console.log("onParamsChange");
      console.log(this.getParamsSelect());
      this.$emit("handleSelectChange", this.getParamsSelect());
    },

    getParamsSelect() {
      return {
        selectedFont:
          this.selectedFont == "" ? this.fontList[0].value : this.selectedFont,
        selectedFontSize:
          this.selectedFontSize == "" ? "10" : this.selectedFontSize,

        selectedBold: this.selectedBold,
        selectedItalics: this.selectedItalics,
        selectedUnderline: this.selectedUnderline,

        selectedLineType:
          this.selectedLineType == ""
            ? this.lineTypeList[0].value
            : this.selectedLineType,
        selectedLineWidth:
          this.selectedLineWidth == "" ? "3" : this.selectedLineWidth,

        selectedLineColor:
          this.selectedLineColor == "" ? "#ff0000" : this.selectedLineColor,
        selectedFillColor:
          this.selectedFillColor == "" ? "#000000" : this.selectedFillColor,

        selectedFillType:
          this.selectedFillType == ""
            ? this.fillTypeList[0].value
            : this.selectedFillType,
      };
    }
  }
};
</script>

<style >
.root-lay {
  display: flex;
  flex-direction: row;
  justify: space-between;
}

.font-dropdown {
  width: 250px;
}

.item-img {
  padding: 10px;
  width: 20px;
  height: 20px;
  background-color: transparent;
}

.item-img-selected {
  padding: 10px;
  width: 20px;
  height: 20px;
  background-color: darkgray;
}

.item-col {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>